<!-- 新增打印组弹窗组件 -->
<template>
  <div>
    <custom-dialog v-model:visible="isShowDialog">
      <div class="dialog-content">
        <div class="title">新增打印组</div>
      </div>
      <div class="form-box">
        <div class="form-item">
          <div class="title">打印组名称</div>
          <el-input class="input" v-model="form.name"></el-input>
        </div>
        <div class="form-item">
          <div class="title">所属计算机</div>
          <el-select class="select" v-model="form.computer">
            <el-option v-for="item in nameList" :key="item.id" :value="item.value" :label="item.label" />
          </el-select>
        </div>
        <div class="form-item">
          <div class="title">主打印机</div>
          <el-select class="select" v-model="form.mainPrinter">
            <el-option v-for="item in nameList" :key="item.id" :value="item.value" :label="item.label" />
          </el-select>
        </div>
        <div class="form-item">
          <div class="title">选择副打印机</div>
          <el-select class="select" v-model="form.subPrinter">
            <el-option v-for="item in nameList" :key="item.id" :value="item.value" :label="item.label" />
          </el-select>
        </div>
      </div>
      <div class="receive-bottom-btn">
        <div class="cancel-btn" @click="onCancel">取消</div>
        <div class="confirm-btn" :class="isHasValue ? 'active' : ''" @click="onConfirm">确定</div>
      </div>
    </custom-dialog>
  </div>
</template>

<script setup>
import { computed, reactive } from 'vue'

const props = defineProps({ addPrinterGroupVisible: { type: Boolean, default: false } })
const emit = defineEmits(['update:addPrinterGroupVisible', 'onConfirm'])

const isShowDialog = computed({ get: () => props.addPrinterGroupVisible, set: val => emit('update:addPrinterGroupVisible', val) })
const form = reactive({ name: '', computer: '', mainPrinter: '', subPrinter: '' })
const nameList = reactive([{ id: 1, label: '测试1', value: 'test1' }, { id: 2, label: '测试1', value: 'test1' }])

const isHasValue = computed(() => Object.values(form).every(v => v !== ''))

function onCancel() { isShowDialog.value = false }
function onConfirm() { if (!isHasValue.value) return; isShowDialog.value = false; emit('onConfirm') }
</script>

<style lang="scss" scoped>
::v-deep { .content { width: 1166px; } }
.dialog-content .title { font-size: 20px; font-family: PingFang SC, PingFang SC-Bold; font-weight: 700; text-align: left; color: #000000; margin-bottom: 10px; }
.form-box { display: flex; align-items: center; padding: 30px 0 0 0; box-sizing: border-box; flex-wrap: wrap; }
.form-box .form-item { width: 33%; display: flex; justify-content: flex-start; align-items: center; margin-bottom: 20px; }
.form-box .form-item .title { white-space: nowrap; font-size: 18px; font-family: PingFang SC, PingFang SC-Regular; font-weight: 400; color: #333333; display: inline-block; margin-right: 20px; }
.form-box .form-item .input { width: 200px; height: 48px; background: #ffffff; border-radius: 12px; }
.form-box .form-item .select { width: 200px; height: 48px; background: #ffffff; border-radius: 12px; }
.form-box .form-item .form-btn { width: 204px; height: 48px; background: #7c0a03; border-radius: 12px; display: flex; justify-content: center; align-items: center; font-size: 18px; font-family: PingFang SC, PingFang SC-Regular; font-weight: 400; color: #ffffff; cursor: pointer; margin-left: 20px; }
.receive-bottom-btn { margin-top: 10px; display: flex; align-items: center; justify-content: flex-end; height: 52px; }
.receive-bottom-btn .cancel-btn { width: 134px; height: 52px; line-height: 52px; background: #ffffff; border: 1px solid #333333; border-radius: 12px; font-size: 18px; font-family: PingFang SC, PingFang SC-Regular; font-weight: 400; text-align: center; color: #333333; cursor: pointer; }
.receive-bottom-btn .active { background: #7c0a03 !important; }
.receive-bottom-btn .confirm-btn { width: 132px; height: 52px; background: #d2d2d2; line-height: 52px; border-radius: 12px; font-size: 18px; font-family: PingFang SC, PingFang SC-Regular; font-weight: 400; text-align: center; color: #ffffff; margin-left: 40px; cursor: pointer; }
</style>
